<template>
    <div style="box-shadow: 0 0 3px 0 #aaaaaa">

        <div class="container">
            <div class="page_title">
                房间管理
            </div>

            <div class="table_container">
                <!-- F1输入框 开始 -->
                <div class="inputGroup">
                    <!-- F1 输入框 -->
                    <span>请输入房号：</span>
                    <Input v-model="roomNum" @on-change="onInpChange_roomNum" clearable placeholder="请输入房号"
                           style="width: 150px"></Input>
                    <span>请输入房型：</span>
                    <Input v-model="roomPart" @on-change="onInpChange_roomPart" clearable placeholder="请输入房型"
                           style="width: 150px"></Input>
                    <Button
                        style="margin-left: 10px;"
                        icon="ios-search"
                        type="primary"
                        @click="queryRoomByRoomNumOrRoomPart"
                    >查询
                    </Button
                    >
                    <div class="addRoom">
                        <Button
                            style="margin-right: 10px;"
                            type="primary"
                            icon="plus"
                            @click="popWindow('','添加房间','0','1','ADD')"
                        >增加房间</Button>
                        <Upload
                            style="height: 20px"
                            action="/api/room/importRoomInfo"
                            :format="['xlsx','xls']"
                            :on-format-error="uploadFormatError"
                            :on-success="uploadSuc"
                            :on-error="uploadError"
                            :data="uploadData"
                            :show-upload-list="false"
                        >
                            <Tooltip content="导入房间需要上传excel文件" placement="top">
                                <Button  style="height: 32px" type="primary" icon="ios-cloud-upload-outline">导入房间</Button>
                            </Tooltip>
                        </Upload>
                    </div>
                    <!-- F1-1 输入框结束 -->
                </div>
                <!-- F1输入框 结束 -->
                <!-- F2表 开始 -->
                <div  class="table">
                    <Table v-if="notLoading" border :columns="columns" :data="dataList"></Table>
                    <div v-else style="text-align: center">
                        <Spin class="loading" size="small"></Spin>
                        <Spin class="loading"></Spin>
                        <Spin class="loading" size="large"></Spin>
                        <h2 style="color: #54a1f1">数据加载中....</h2>
                    </div>
                    <!-- 分页器 开始 -->
                    <div class="pagination">
                        <Page :total="Number(data.total)" :page-size="pages.pageSize*1" @on-change="pageChange" show-elevator></Page>
                    </div>
                    <!-- 分页器 结束 -->
                </div>
                <!-- F2表 结束 -->
            </div>
        </div>

        <!--  添加房间的弹窗  -->
        <Modal v-model="showWindow" :title="popWindowTitle" @on-ok="ok" @on-cancel="cancel">
            <div class="addRoomInput">
                <span>楼层：</span>
                <Input-number class="inp"  :disabled="requestType=='DELETE'? true:false" :min="1" v-model="RoomFormData.floor"
                              ></Input-number>
            </div>
            <div class="addRoomInput">
                <span>房号：</span>
                <Input-number class="inp"  :disabled="requestType=='DELETE'? true:false" :min="1" v-model="RoomFormData.roomNum"
                       placeholder="请输入房间号"></Input-number>
            </div>
            <div class="addRoomInput">
                <span>房型：</span>
                <Input class="inp" :disabled="requestType=='DELETE'? true:false" v-model="RoomFormData.roomPart"
                       placeholder="请输入房型"></Input>
            </div>
            <div class="addRoomInput">
                <span>可住人数：</span>
                <Input-number class="inp"  :disabled="requestType=='DELETE'? true:false" :min="1" v-model="RoomFormData.personNum"
                       placeholder="请输入可住人数"></Input-number>
            </div>
            <div class="addRoomInput">
                <span>房间面积：</span>
                <Input-number class="inp"  :disabled="requestType=='DELETE'? true:false" :min="1" v-model="RoomFormData.roomArea"
                       placeholder="请输入房间面积"></Input-number>
            </div>
            <div class="addRoomInput">
                <span>是否有窗：</span>
                    <Radio-group class="inp" v-model="RoomFormData.hasWindow">
                        <Radio :disabled="requestType=='DELETE'? true:false" label="有窗"></Radio>
                        <Radio :disabled="requestType=='DELETE'? true:false" label="无窗"></Radio>
                    </Radio-group>
            </div>
            <div class="addRoomInput">
                <span>床型：</span>
                <Input class="inp" :disabled="requestType=='DELETE'? true:false" v-model="RoomFormData.bedType"
                       placeholder="请输入床型"></Input>
            </div>
            <div class="addRoomInput">
                <span>备注：</span>
                <Input class="inp" type="textarea" :rows="4" :disabled="requestType=='DELETE'? true:false" v-model="RoomFormData.remark"
                       placeholder="请输入备注"></Input>
            </div>

            <div slot="footer" class="popFooter">
                <div>
                    <Button type="default" @click="cancel">取消</Button>
                    <Button type="primary" @click="ok">确定</Button>
                </div>
            </div>

        </Modal>

    </div>
</template>

<script>
export default {
    data() {
        return {
            //分页对象
            pages: {
                currentPage: '1',
                pageSize: '12',
            },
            //查询出的所有房间
            data: [],
            //搜索的房间号
            roomNum: '',
            //搜索的房型
            roomPart: '',
            //操作时的房间入住状态
            moveIntoStatus: '',
            //操作时的房间打扫状态
            cleanStatus: '',
            //操作类型
            requestType: '',
            //弹窗标题
            popWindowTitle: '',
            //加载状态
            notLoading:false,
            //导入房间列表
            uploadData:{
                adminId:window.$localStorage.getItem("adminId")
            },
            //增加房间的绑定数据
            RoomFormData: {
                floor: '',
                roomNum: '',
                roomPart: '',
                personNum: '',
                roomArea: '',
                hasWindow: '',
                bedType: '',
                remark: '',
            },
            showWindow: false,
            columns: [
                {
                    title: "房号",
                    key: "roomNum",
                    sortable: true,
                    align: 'center',
                },
                {
                    title: "楼层",
                    key: "floor",
                    sortable: true,
                    align: 'center',
                },
                {
                    title: "房型",
                    key: "roomPart",
                    sortable: true,
                    align: 'center',
                },
                {
                    title: "可住人数",
                    key: "personNum",
                    sortable: true,
                    align: 'center',
                },
                {
                    title: "床型",
                    key: "bedType",
                    sortable: true,
                    align: 'center',

                },
                {
                    title: "是否有窗",
                    key: "hasWindow",
                    sortable: true,
                    align: 'center',
                },
                {
                    title: "房间面积",
                    key: "roomArea",
                    sortable: true,
                    align: 'center',
                },
                {
                    title: "备注信息",
                    key: "remark",
                    align: 'center',
                    sortable: true,
                    render: (h, params) => {
                        return h("div", [
                            h("Tooltip", {
                                    porps: {
                                        placement: "top-start",
                                        transfer: true,
                                    },
                                },
                                [
                                    params.row.remark ? params.row.remark.substring(0, 17) + "..." : '暂无备注',
                                    h("div", {
                                            slot: "content",
                                            style: {
                                                width: "200px",
                                                height: '100px',
                                                display: 'flex',
                                                whiteSpace: "break-spaces",
                                            },
                                        },
                                        params.row.remark ? params.row.remark : '暂无备注',
                                    ),
                                ]
                            ),
                        ]);
                    },
                },
                {
                    title: "操作",
                    key: "action",
                    width: 150,
                    align: "center",
                    render: (h, params) => {
                        return h("span", [
                            h(
                                "Button",
                                {
                                    props: {
                                        type: "primary",
                                        size: "small",
                                    },
                                    style: {
                                        margin: "5px",
                                    },
                                    on: {
                                        click: () => {
                                            console.log('====================', params.row)
                                            this.RoomFormData.floor = Number(params.row.floor.slice(1, params.row.floor.length))
                                            this.RoomFormData.roomNum = params.row.roomNum
                                            this.RoomFormData.roomPart = params.row.roomPart
                                            this.RoomFormData.roomArea = params.row.roomArea
                                            this.RoomFormData.personNum = params.row.personNum
                                            this.RoomFormData.hasWindow = params.row.hasWindow
                                            this.RoomFormData.bedType = params.row.bedType
                                            this.RoomFormData.remark = params.row.remark
                                            let id = params.row.id
                                            let moveIntoStatus = params.row.moveIntoStatus
                                            let cleanStatus = params.row.cleanStatus
                                            let roomNum = params.row.roomNum
                                            this.popWindow(id, '修改房间：' + roomNum, moveIntoStatus, cleanStatus, 'UPDATE')
                                        },
                                    },
                                },
                                "修改"
                            ),

                            h(
                                "Button",
                                {
                                    props: {
                                        type: "error",
                                        size: "small",
                                    },
                                    style: {
                                        margin: "5px",
                                    },
                                    on: {
                                        click: () => {
                                            console.log("点击了删除按钮");
                                            let id = params.row.id
                                            let moveIntoStatus = params.row.moveIntoStatus
                                            let cleanStatus = params.row.cleanStatus
                                            let roomNum = params.row.roomNum
                                            this.popWindow(id, '删除的房间：' + roomNum, moveIntoStatus, cleanStatus, 'DELETE')
                                        },
                                    },
                                },
                                "删除"
                            ),
                        ]);
                    },
                },
            ],
            dataList: [],
        };
    },
    methods: {
        //房间操作接口
        operationRoom(moveIntoStatus, cleanStatus, requestType) {
            //表单验证
            if (!this.RoomFormData.floor && this.requestType == 'ADD') {
                this.open('请填写楼层')
                return;
            } else if (!this.RoomFormData.roomNum && this.requestType == 'ADD') {
                this.open('请填写房间号')
                return;
            } else if (!this.RoomFormData.roomPart && this.requestType == 'ADD') {
                this.open('请填写房型')
                return;
            } else if (!this.RoomFormData.personNum && this.requestType == 'ADD') {
                this.open('请填写可住人数')
                return;
            } else if (!this.RoomFormData.roomArea && this.requestType == 'ADD') {
                this.open('请填写房间面积')
                return;
            } else if (!this.RoomFormData.hasWindow && this.requestType == 'ADD') {
                this.open('请填写是否有窗')
                return;
            } else if (!this.RoomFormData.bedType && this.requestType == 'ADD') {
                this.open('请填写床型')
                return;
            }

            let url = "/room/managerRoomInfo";
            let params = {
                id: this.roomId,
                floor: 'F' + this.RoomFormData.floor,
                roomNum: this.RoomFormData.roomNum,
                roomPart: this.RoomFormData.roomPart,
                personNum: this.RoomFormData.personNum,
                roomArea: this.RoomFormData.roomArea+'㎡',
                hasWindow: this.RoomFormData.hasWindow,
                bedType: this.RoomFormData.bedType,
                remark: this.RoomFormData.remark,
                moveIntoStatus,
                cleanStatus,
                adminId: window.$localStorage.getItem("adminId"),
                requestType,
            };
            this.$http.post(url, this.common.request(params)).then((res) => {
                if (res.data.code == 200) {
                    this.showWindow = false
                    this.queryData()
                    this.open(res.data.msg)
                }
            });
        },
        //查询所有数据
        queryData(roomNum, roomPart) {
            let params = {
                adminId: window.$localStorage.getItem("adminId"),
                roomNum,
                roomPart,
                page: this.pages.currentPage,
                pageSize: this.pages.pageSize
            }
            this.$http.post('/room/getRoomInfoPage', this.common.request(params)).then((res) => {
                if (res.data.code == 200) {
                    this.data = res.data.data
                    console.log("当前本地数据", this.data);
                    this.dataList = res.data.data.list
                } else if (code >= 400) {
                    this.open('系统错误')
                }
            });
        },
        //使用房间id或房型搜索该房间
        queryRoomByRoomNumOrRoomPart() {
            if (!this.roomNum && !this.roomPart) {
                this.open('请输入查询的房间号或房型')
                return
            }
            if (this.roomNum && this.roomPart) {
                this.open('请清除房间号或房型')
                return
            }

            if (this.roomNum != '' && this.roomPart === '') {
                this.queryData(this.roomNum)
            } else if (this.roomPart != '' && this.roomNum === '') {
                let roomPart = this.roomPart.trim()
                this.queryData('', roomPart)
            }
        },
        //搜索框事件
        onInpChange_roomNum() {
            if (!this.roomNum) {
                this.queryData()
            }
        },
        onInpChange_roomPart() {
            if (!this.roomPart) {
                this.queryData()
            }
        },
        //弹窗
        popWindow(id, popWindowTitle, moveIntoStatus, cleanStatus, requestType) {
            if(requestType =='ADD'){
                this.RoomFormData = {
                    floor:1
                }
            }

            this.showWindow = true
            this.roomId = id,
            this.popWindowTitle = popWindowTitle
            this.moveIntoStatus = moveIntoStatus
            this.cleanStatus = cleanStatus
            this.requestType = requestType
            console.log('当前操作的房间的id是 :', this.roomId)
            console.log('当前操作房间的弹窗标题是:', this.popWindowTitle)
            console.log('当前操作房间的入住状态是：', this.moveIntoStatus)
            console.log('当前操作房间的打扫状态是：', this.cleanStatus)
            console.log('当前操作房间的类型是：', this.requestType)
        },
        //提示消息
        open(nodesc) {
            this.$Notice.open({
                title: "提示！",
                desc: nodesc,
            });
        },
        cancel() {
            this.showWindow = false
        },
        ok() {
            this.showWindow = true
            this.operationRoom(this.moveIntoStatus, this.cleanStatus, this.requestType)
        },
        //点击分页器
        pageChange(value) {
            this.pages.currentPage = value
            this.queryData()
        },
        //导入类型错误
        uploadFormatError(err){
            this.open('导入的文件类型错误，需要文件后缀名为xlsx或xls')
            this.queryData()
        },
        //导入成功
        uploadSuc(res){
            if(res.code==200){
                this.open(res.msg)
                this.queryData()
            }
        },
        uploadError(err){
            this.open('上传失败，请刷新浏览器重试')
            this.queryData()
        },
    },
    watch: {
        dataList(newValue, oldValue) {
            if(newValue.length>0){
                this.notLoading = true
            }
        }
    },
    mounted() {
        this.queryData()
    }
};
</script>

<style lang="less" scoped>
.loading{
    display: inline-block;
    padding: 20px;
}
.page_title{
    border-radius: 2px;
    background-color: #ffffff;
    font-family: "PingFang SC";
    font-style: normal;
    font-weight: 700;
    font-size: 18px;
    line-height: 140%;
    user-select: none;
    padding: 10px;
    border-bottom: 1px solid #ebecf0;
}
.table_container{
    background-color: #FFFFFF;
    padding: 10px;
}
.inputGroup {
    display: flex;
    align-items: center;
    margin-bottom: 10px;
    span {
        margin-left: 5px;
    }

    .addRoom {
        flex: 1;
        display: flex;
        justify-content: flex-end;
    }
}

.table {
    background-color: #ffff;

    .pagination {
        padding: 10px;
        display: flex;
        justify-content: center;
    }
}

//添加房间弹窗样式
.addRoomInput {
    padding: 10px;
    display: flex;
    align-items: center;
    justify-content: space-around;

    span {
        width: 80px;
        text-align: center;
    }

    .inp {
        width: 300px;

    }
}
</style>
